import React, { useEffect, useState } from 'react';
// 引入 antd 组件
import { NavBar } from 'antd-mobile';
// 引入 icon 样式
import { CloseOutline } from 'antd-mobile-icons';
// 引入 less 样式
import './album.less';

import { history } from 'umi';
import axios from 'axios';

export default function album() {
  // 保存相册照片
  const [albums, setAlbums] = useState([]);

  useEffect(() => {
    getAlbum();
  }, []);

  // 获取相册照片
  const getAlbum = async () => {
    let {
      data: { code, msg, data },
    } = await axios.get('/api/mine/getAlbum');
    if (code === 200) {
      setAlbums(data);
    }
  };

  // 点击返回到个人信息页面
  const back = () => {
    history.push('/person');
  };

  //
  const setTou = (path: string) => {
    history.push(`/albumchild?path=${path}`);
  };
  return (
    <div className="album">
      <div className="album-top">
        <NavBar onBack={back} backArrow={<CloseOutline />}>
          <div>最近项目</div>
          <div className="my-nav-bar-subtitle">轻触更换相册</div>
        </NavBar>
      </div>

      <div className="album-list">
        {albums.map((item) => {
          return (
            <div
              className="album-item"
              key={item._id}
              onClick={() => setTou(item.path)}
            >
              <img src={item.path} alt="" />
            </div>
          );
        })}
      </div>
    </div>
  );
}
